<template>
  <div class="box flex-column-start">
    <div class="box-top flex-row-between">
      <div class="box-top-img flex-row-start">
        <div class="img">
          <!-- <svg-icon :icon-class="content.icon"></svg-icon> -->
          <img :src="content.icon" alt="" />
        </div>
        <div class="box-top-content flex-column-start">
          <span class="title">{{ content.name }}</span>
          <div
            class="flex-row-start"
            style="align-items: center; margin-top: 8px"
          >
            <span class="span"> {{ content.desc | titleShow }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="box-bottom flex-row-between">
      <div class="box-bottom-left">
        <span style="color: #009944" v-if="content.charge_type == 0">免费</span>
        <span style="color: #009944" v-else-if="content.charge_type == 1"
          >限时免费</span
        >
        <span style="color: #f61919" v-else-if="content.charge_type == 2"
          >￥{{ content.fee }}</span
        >
      </div>
      <div class="box-bottom-right flex-row-end">
        <div class="btn left flex-center" v-if="!content.is_my_app" @click="order">
          立即订购
        </div>
        <div
          class="btn left flex-center"
          :class="content.status == 0 ? 'disBtn' : ''"
          v-else-if="content.is_my_app"
          @click="use"
        >
          立即使用
        </div>
        <div class="btn right flex-center" @click="look">了解详情</div>
      </div>
    </div>

    <div class="yixiajia" v-if="content.status == 0">
      <img src="../image/yixiajia.png" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  inject: ["closeDrawer"],
  props: {
    content: {
      type: Object,
      default: () => {},
    },
  },
  filters: {
    getType(value) {
      let resolve = null;
      switch (value) {
        case 0:
          resolve = "免费";
          break;
        case 1:
          resolve = "收费";
          break;
      }
      return resolve;
    },
    titleShow(value) {
      if (value.length >= 25) value = value.slice(0, 25) + "...";
      return value;
    },
  },
  data() {
    return {
      value: true,
    };
  },
  methods: {
    order() {
      this.$emit("order", this.content);
    },
    use() {
      if (this.content.status == 0) return;
      // 当存在该属性时，代表打开本项目中某个模态框
      if (this.content.url == "/yongyouT") {
        this.$emit("openNativeDrawer", true);
      } else if(this.content.url == "/xjl") {
        this.$emit("openlittleelfDrawer", true);
      } else if (this.content.url == "/move") {
        this.$emit("openMoveDrawer", this.content);
      } else if (this.content.url == "/") {
        window.open(`http://${window.location.host}${this.content.wap_url}`);
      }
    },
    look() {
      this.$emit("order", this.content);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  padding: 15px;
  border: 1px solid #e8edf0;
  border-radius: 10px;
  background: #ffffff;
  position: relative;

  &:hover {
    cursor: pointer;
    box-shadow: 0px 0px 8px 0px rgba(4, 0, 0, 0.1);
  }

  .yixiajia {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    img {
      width: 44px;
      height: 44px;
    }
  }

  &-top {
    &-img {
      height: 70px;
      align-items: center;
      .img {
        width: 70px;
        min-width: 70px;
        height: 70px;
        min-height: 70px;
        border-radius: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    &-content {
      margin-left: 10px;
      height: 100%;
      padding-top: 4px;

      .title {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #303030;
      }

      .span {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #aaa;
        line-height: 18px;
        width: 200px;
        display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
        -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
        -webkit-line-clamp: 2; // 显示两行
        overflow: hidden;
      }

      .mianfei {
        width: 36px;
        height: 18px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  &-bottom {
    margin-top: 16px;
    height: 36px;
    align-items: center;
    &-left {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #009944;
    }
    &-right {
      align-items: center;
      .btn {
        width: 70px;
        height: 30px;
        border-radius: 6px;
        font-size: 12px;
        padding: 0 !important;
        &:hover {
          cursor: pointer;
        }
      }
      .disBtn {
        background: #999999 !important;
        &:hover {
          cursor: not-allowed;
        }
      }
      .left {
        background: #009944;
        color: #fff;
      }
      .right {
        background: #ffffff;
        border: 1px solid #dfdfdf;
        color: #333333;
        margin-left: 10px;
      }
    }
  }
}

.noOrdered,
.yesOrdered {
  width: 4px;
  height: 4px;
}
.noOrdered {
  background: #f13130;
}
.yesOrdered {
  background: #009944;
}
/deep/.svg-icon {
  width: 100% !important;
  height: 100% !important;
}
</style>